<template>
	<div class="component-footerGuide">
		<van-tabbar v-model="active">
			<van-tabbar-item name="/home" to="/home" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item name="/exam-list" to="/exam-list" icon="todo-list-o"
				>我的考试</van-tabbar-item
			>
			<van-tabbar-item name="/mine" to="/mine" icon="contact">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import { mapState } from "vuex";
export default {
	name: "commonNav",
	computed: {
		...mapState({
			qnInfo: "qnInfo",
		}),
	},
	data: function() {
		return {
			active: "home",
		};
	},
	watch: {
		"$route.path": function(newVal) {
			this.active = newVal;
		},
	},

	mounted() {},
	methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.component-footerGuide {
	.van-tabbar {
		background-color: #151523;
	}

	.van-tabbar-item--active {
		color: #519bab;
	}
	[class*="van-hairline"]::after {
		border: none;
	}
}
</style>
